<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>

    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

    <div id="map"></div>

    <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkOU6Ut2S2p90EyNlOx8HGaivgC8YD47s"></script>
    <script type="text/javascript" src="../build/mapv.js"></script>

    <script type="text/javascript">

        var customMapType = new google.maps.StyledMapType([
            {
                stylers: [
                  {hue: '#890000'},
                  {visibility: 'simplified'},
                  {gamma: 0.5},
                  {weight: 0.5}
                ]
            },
            {
                elementType: 'labels',
                stylers: [{visibility: 'off'}]
            },
            {
                featureType: 'water',
                stylers: [{color: '#890000'}]
            }
        ], {
            name: 'Custom Style'
        });
        var customMapTypeId = 'custom_style';

        // Create a map object and specify the DOM element for display.
        var map = new google.maps.Map(document.getElementById('map'), {
            center: new google.maps.LatLng(39.3, -95.8),
            scrollwheel: false,
            zoom: 4
        });

        map.mapTypes.set(customMapTypeId, customMapType);
        map.setMapTypeId(customMapTypeId);

        var resolutionScale = window.devicePixelRatio || 1;

        var randomCount = 500;
        var data = [];
        while (randomCount--) {
            data.push({
                geometry: {
                    type: 'Point',
                    coordinates: [-125.8 + Math.random() * 50, 30.3 + Math.random() * 20]
                },
                count: 30 * Math.random()
            });
        }

        var dataSet = new mapv.DataSet(data);

        var options = {
            fillStyle: 'rgba(255, 250, 50, 0.7)',
            shadowColor: 'rgba(255, 255, 50, 1)',
            shadowBlur: 10,
            max: 200,
            size: 50,
            draw: 'grid'
        }

        var mapvLayer = new mapv.googleMapLayer(map, dataSet, options);

    </script>
	
</body>
</html>
